<template>
  <div class = 'main'>
    <div style="display: flex;margin-top: 10px"><router-link to="/home" ><i class="el-icon-back" style="font-size: 30px"></i></router-link></div>
      <Usertop></Usertop>
    <div class = "fyi_wrapper">
      <div class="search_wrapper home_vue" style="">
        <el-input placeholder="请输入单词" v-model="word" clearable style="margin: 0 10px"></el-input>
        <el-button icon="el-icon-search" style="margin-right: 10px" circle @click="search"></el-button>
      </div>
      <div class = "result_wrapper" style="margin-top: 50px">
        <div class="source_str" style="margin: 20px auto;font-size: 30px;font-weight: normal;" ref="src_str">
          <div class="srcshow" v-show="show_src">{{word_1}}</div>
        </div>
        <div class="target_str" style="margin: 20px auto;font-size: 40px;font-weight: bold"  ref="tgt_str">
{{result}}
        </div>
      </div>
    </div>
    <!--form-->
    <el-button v-show="result!=''" type="primary" @click="show_int = show_int+1">添加到我的词库</el-button>
    <AddWord :word_1="word_1" :tgt="result" :show_int="show_int" :hide_input="true"></AddWord>
  </div>
</template>

<script>
  import Usertop from "../usertop/Usertop";
  import {getRequest, postRequest} from "../../utils/api";
  import { mapGetters, mapState } from 'vuex'
  import AddWord from "../addword/AddWord";
  import {strsutils} from "../../utils/strutils";
  let baseurl = strsutils.baseurl
  export default {
    name: "Trans",
    data(){
      return {
        show_int: 0,
        form: {
          name: '',
          cmd: '熟练',
          imp:'重要',
          delivery: false,
        },
        show_src: false,
        word: 'love',
        result: '',
        word_1: ''
      }
    },
    components:{
      Usertop, AddWord
    },
    mounted() {
      console.debug("mount")
      // this.getUserInfo()
    },
    methods:{
      showDialog(){
        // this.dialogFormVisible = false
        // this.dialogFormVisible = true
        console.debug('showDialog')
      },
      search(){
        let _this = this
        console.debug("查翻译")
        getRequest(strsutils.baseurl+'/trans/'+this.word, '')
          .then(function (res) {
            _this.show_src = true
            _this.word_1 = _this.word
            _this.result = res.data
          }).catch(function (err) {
          console.debug(err)
        })
      }
    },
    computed:{
      ...mapState(['count', 'username', 'userid']),
      ...mapGetters({asd:'inc_inc'})
    }
  }
</script>
<style>
  .home_vue .el-input__inner{
    border-radius: 50px;
  }
  .trans_dialog .el-dialog{width: 80%;color: red;max-width: 600px;}
</style>

<style scoped>
  .search_wrapper{
    display: flex;max-width: 600px;margin: 10px auto;
  }
</style>
